<template>
  <div class="TicketView">
      <van-form validate-first ref="form">
        <div :class="is_sub?'mg_bottom_1':'mg_bottom_20'" v-for="(item, index) in fields" :key="index">
          <!-- 字符串 -->
          <van-field
            v-if="item.field_type_id === 5"
            :label="item.field_name"
            v-model="form_data[item.field_key]"
            name="pattern"
            placeholder="请输入"
            :required="item.field_attribute == 2"
            :disabled ="item.field_attribute == 1"
            input-align="right"
          />

          <!-- 整型 -->
          <div v-if="item.field_type_id === 10" :class="(item.field_attribute == 1)?'disable':''">
            <van-number-keyboard
              @input="onInput($event,item.field_key)"
              @delete="onDelete(item.field_key)"
              :show="is_show_popup[item.field_key]"
              :maxlength="9"
              close-button-text="完成"
              @blur="showPopup('is_show_popup',item.field_key,false)"
            />
            <van-field
              :label="item.field_name"
              readonly
              clickable
              :value="form_data[item.field_key]"
              @touchstart.native.stop="showPopup('is_show_popup',item.field_key,true)"
              placeholder="请输入"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
              input-align="right"
            />
          </div>

          <!-- 浮点型 -->
          <div v-if="item.field_type_id === 15" :class="(item.field_attribute == 1)?'disable':''">
            <van-number-keyboard
              extra-key="."
              @input="onInput($event,item.field_key)"
              @delete="onDelete(item.field_key)"
              :show="is_show_popup[item.field_key]"
              close-button-text="完成"
              @blur="showPopup('is_show_popup',item.field_key,false)"
            />
            <van-field
              :label="item.field_name"
              readonly
              clickable
              :value="form_data[item.field_key]"
              @touchstart.native.stop="showPopup('is_show_popup',item.field_key,true)"
              placeholder="请输入"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
              input-align="right"
            />
          </div>

          <!-- 单选 -->
          <div v-if="item.field_type_id === 35 || item.field_type_id === 45" :class="(item.field_attribute == 1)?'disable':''">
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="read_only_properties[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true)"
              :rules="[{required:true,message: '该选项为必选项'}]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
            >
              <van-picker
                @cancel="showPopup('is_show_popup',item.field_key,false)"
                show-toolbar
                :columns="selectData(item.field_choice)"
                @confirm="confirmSelect($event,item.field_key)"
                value-key="name"
              />
            </van-popup>
          </div>

          <!-- 多选框-->
          <div v-if="item.field_type_id === 40" :class="(item.field_attribute == 1)?'disable':''">
            <van-field
              name="checkboxGroup"
              :label="item.field_name"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
            >
              <template #input>
                <van-checkbox-group v-model="form_data[item.field_key]" direction="horizontal">
                  <van-checkbox
                    style="margin-top: 5px"
                    :name="k.id"
                    shape="square"
                    v-for="k in selectData(item.field_choice)"
                    :key="k.id"
                    :disable="item.field_attribute == 1"
                    @click="checkboxData(k.id,item.field_key)"
                  >
                    {{k.name}}
                  </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </div>
          <!-- 多选下拉框 -->
          <div v-if="item.field_type_id === 50" :class="(item.field_attribute == 1)?'disable':''">
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="read_only_properties[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true); result = form_data[item.field_key]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
              :style="{ height: '70%' }"
            >
              <div class="popup_title van-hairline--bottom">
                <div class="left" @click="showPopup('is_show_popup',item.field_key,false);popup_list = []">取消</div>
                <div class="right" @click="confirmMultiple(item.field_key,selectData(item.field_choice))">确定</div>
              </div>
              <div class="popup_list">
                <van-checkbox-group v-model="result">
                  <div
                    class="popup_item van-hairline--bottom"
                    v-for="k in selectData(item.field_choice)"
                    :key="k.id"
                    @click="multipleAdd(k)"
                  >
                    {{k.name}}
                    <van-checkbox  class="checkbox" :name="k.id"  checked-color="#07c160"></van-checkbox>
                  </div>
                </van-checkbox-group>
              </div>
            </van-popup>
          </div>

          <!-- 日期时间类型 -->
          <div v-if="item.field_type_id === 30" :class="(item.field_attribute == 1)?'disable':''">
            <!-- {{is_show_popup[item.field_key]}} -->
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="form_data[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disabled="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true)"
              :rules="[{required:true,message: '该选项为必选项'}]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
            >
              <van-datetime-picker
                v-model="currentDate"
                type="datetime"
                @cancel="showPopup('is_show_popup',item.field_key,false)"
                @confirm="confirmDatetime('form_data',item.field_key,'datetime',$event)"
              />
            </van-popup>
          </div>

          <!-- 日期类型 -->
          <div v-if="item.field_type_id === 25" :class="(item.field_attribute == 1)?'disable':''">
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="form_data[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true)"
              :rules="[{required:true,message: '该选项为必选项'}]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
            >
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                @cancel="showPopup('is_show_popup',item.field_key,false)"
                @confirm="confirmDatetime('form_data',item.field_key,'date',$event)"
              />
            </van-popup>
          </div>

           <!-- 文本域 -->
          <van-field
            v-if="item.field_type_id === 55&&item.label.type !== 'sub_table' "
            v-model="form_data[item.field_key]"
            rows="4"
            autosize
            input-align="right"
            :required="item.field_attribute == 2"
            :disabled ="item.field_attribute == 1"
            :label="item.field_name"
            type="textarea"
            placeholder="请输入留言"
            show-word-limit
          />
          <!-- 布尔型 20 -->
          <van-cell :class="(item.field_attribute == 1)?'disable':''" :title="item.field_name" v-if="item.field_type_id === 20" required>
            <van-switch @click="change_switch($event,item.field_key)" v-model="form_data[item.field_key]" size="24px" slot="right-icon"/>
          </van-cell>
          <!-- 用户选择(配合钉钉接口) 60 -->
          <div v-if="item.field_type_id === 60" :class="(item.field_attribute == 1)?'disable':''">
            <van-cell
              :title="item.field_name"
              is-link
              :value="read_only_properties[item.field_key][0] ? read_only_properties[item.field_key][0].alias : '请选择'"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
              @click="showContact(item.field_key,item.field_name,item.field_type_id,read_only_properties[item.field_key])"
            />
          </div>

          <!-- 多用户选择(配合钉钉接口) 70 -->
          <div v-if="item.field_type_id === 70" :class="(item.field_attribute == 1)?'disable':''">
            <van-cell
              :title="item.field_name"
              is-link
              :value="read_only_properties[item.field_key][0] ? `
                ${read_only_properties[item.field_key][0].alias}
                ${read_only_properties[item.field_key][1] ? ',' + read_only_properties[item.field_key][1].alias : ''}
                ${(read_only_properties[item.field_key].length > 2) ? '...' : ''}
              ` : '请选择'"
              :required="item.field_attribute == 2"
              :disabled ="item.field_attribute == 1"
              @click="showContact(item.field_key,item.field_name,item.field_type_id,read_only_properties[item.field_key])"
            />
          </div>
          <!-- 附件选择,(上传接口需自己实现) 80 -->
          <div v-if="item.field_type_id === 80">
            <div v-if="item.field_attribute == 1" class="img_box">
              <img
                class="img"
                :src="item"
                v-for="(item,index) in urlList"
                :key="index"
                @click="imagePreview(urlList,index)"
              />
            </div>
            <div v-if="item.field_attribute != 1">
               <upload
                  :field_key="item.field_key"
                  :urlList="urlList"
                  :uploadPath='uploadPath'
                  @complete="uploadComplete"
                  :class="(item.field_attribute == 1)?'disable':''"
                />
            </div>
          </div>
          <!-- 子菜单 -->
          <div  v-if="item.field_type_id === 55&&item.label.type === 'sub_table'&&is_show_sub_form" >
            <div v-for="(list,index) in form_data[item.field_key]" :key="index">
              <div class="title_sub">
                {{item.field_name}}
                {{(form_data[item.field_key].length>1) ? index+1 : ''}}
                <button class="del_sub"
                  v-show="form_data[item.field_key].length>1 && item.field_attribute != 1"
                  @click="deleteSubForm(item.field_key,index)"> 删除 </button>
              </div>
              <my-ticket
                :is_sub="true"
                :fields="list"
                :attribute="attribute"
                :ref="`${item.field_key}${index}`"
              />
            </div>
            <button v-show="item.field_attribute != 1" @click="addSubForm(item.field_key)" class="add_sub">添加清单</button>
          </div>
        </div>
      </van-form>
    <!-- 联系人 -->
    <transition name="van-slide-right">
      <contact ref="contact" @contactList="contactList"/>
    </transition>
  </div>
</template>

<script>
import moment from 'moment';
import contact from '../components/contact.vue'
import upload from '../components/uploadImage.vue'
import {ImagePreview} from "vant"
export default {
  name: "myTicket",
  components:{
    contact,
    upload
  },
  props:{
    fields:{
      type:Array,
      required:true
    },
    is_sub:{
      type: Boolean,
      default:false
    },
    // attribute配置子表单字段显示状态,默认是loonflow工单自定义字段template里配置的JSON
    // 其他状态下需要另行配置,loonflow 工单状态下的,状态标签
    // 前台可解析格式 {"子表单key":1,"子表单key":2,"子表单key":3}
    // 1.只读  2:必填 3:非必填
    // 不区分子表单个数和是否多个子表单
    attribute:{
      type: Object,
      default:()=>{
        return {}
      }
    },
    sub_disable:{
      type: Number,
      default:3
    }
  },
  data(){
    return{
      is_show_sub_form: true,
      field_list:this.fields,
      read_only_properties:{}, // 只读属性,选择器用户看的文本,id存在form
      currentDate: new Date(),
      show_namber_keyboard: false, // 整数键盘
      show_float_keyboard: false, // 浮点数键盘
      sub_init_state:[],
      form_data:{},
      is_show_popup:{},
      contact_transfer_key:'', // 联系人选择后暂存转交的key
      contact_transfer_type:'',
      popup_list:[], // 第三数组接受,用于内存中暂存的数据
      result:[],
      urlList:[],
      uploadPath:'tickets/',
    }
  },
  created(){
    this.initForm()
  },
  methods:{
    // 图片预览
    imagePreview(images,startPosition){
      ImagePreview({
        images: images,
        startPosition: startPosition,
        closeable: true
      });
    },
    // 添加子表单
    addSubForm(key){
      this.subAddData(key)
      this.form_data[key].push(this.sub_init_state)
      this.$forceUpdate()
    },
    // 删除子表单
    deleteSubForm(key,index){
      this.subAddData(key)
      this.form_data[key].splice(index,1)
      this.$forceUpdate()
      this.is_show_sub_form = false
      this.$nextTick(()=>{
        this.is_show_sub_form = true
      })
    },
    // 上传完成,返回数据
    uploadComplete(data){
      this.form_data[data.field_key] = data.urlList
    },
    // 多选框数据处理
    checkboxData(id,key){
      let list = this.form_data[key].map(item => {return item})
      if(list.includes(id)){
        list.splice(list.indexOf(id),1)
      }else{
        list.push(id)
      }
      // 复杂对象套复杂对象必须delete
      this.$delete(this.form_data,key)
      this.$set(this.form_data,key,list)
    },
    // 联系人选择
    showContact(key,title,type,list){
      this.contact_transfer_key = key
      this.contact_transfer_type = type
      this.$refs.contact.show({type,title,list})
    },
    // 联系人返回列表
    contactList(list){
      if(list.length < 1){
        // 防止选择后删除
        this.$set(this.read_only_properties,this.contact_transfer_key,'')
        this.$set(this.form_data,this.contact_transfer_key,null)
      }
      if(this.contact_transfer_type == 60){
        this.$delete(this.read_only_properties,this.contact_transfer_key)
        this.$set(this.read_only_properties,this.contact_transfer_key,list)
        if(this.is_sub){
          this.$set(this.form_data,this.contact_transfer_key,list[0])
        }else{
          this.$set(this.form_data,this.contact_transfer_key,list[0].username)
        }
      }else if(this.contact_transfer_type == 70){
        let id_list = list.map(item => {
          if(this.is_sub){
            return item
          }else{
            return item.username
          }
        })
        this.$delete(this.read_only_properties,this.contact_transfer_key)
        this.$set(this.read_only_properties,this.contact_transfer_key,list)
        // console.log(this.read_only_properties[this.contact_transfer_key])
        this.$set(this.form_data,this.contact_transfer_key,id_list)
      }
    },
    // 开关状态改变(Boolean类型的字段)
    change_switch(event,key){
      this.form_data[key] = !this.form_data[key]
      this.$forceUpdate()
    },
    // 初始化表单
    initForm(){
      // 生成新的表单绑定数据
      this.form_data = {}
      this.is_show_popup = {}
      this.read_only_properties = {}
      let field_type_obj = {
        "5":"",
        "25":null,
        "30":null,
        "55":"",
        "80":"",
        "10":0,
        "15":0,
        "35":null,
        "45":null,
        "60":null,
        "40":[],
        "50":[],
        "70":[],
        "20":false
      }
      this.fields.forEach(field=>{
        // 1.所有可带弹框字段
        this.is_show_popup[field.field_key] = false
        // 2.所有用户展示和后台返回值不一字段
        this.read_only_properties[field.field_key] = ''
        // 3.后台返回字段,默认值
        // 字符类: 5,30,25,55,80 '',数字类:10,15,35,45,60 null, 数组类: 40,50,70 [],布尔类:20 false
        this.form_data[field.field_key] = field_type_obj[field.field_type_id]

        // 子表单
        if(field.field_type_id === 55&&field.label.type === 'sub_table'){
          this.form_data[field.field_key] = []
          this.sub_init_state = JSON.parse(field.field_template)
          if(!field.field_value){
            this.form_data[field.field_key].push(this.sub_init_state)
          }else{
            try {
              this.form_data[field.field_key] = JSON.parse(field.field_value)
            } catch(e) {
              this.form_data[field.field_key] = field.field_value
            }
          }
        }
        // form赋值
        if(field.field_value){
          // __ob__: Observer
          if(typeof field.field_value == 'object'){
           field.field_value = JSON.stringify(field.field_value)
          }
          if(typeof field.field_choice == 'object'){
           field.field_choice = JSON.stringify(field.field_choice)
          }
          try {
            this.form_data[field.field_key] = JSON.parse(field.field_value)
            field.field_value = JSON.parse(field.field_value)
          } catch(e) {
            this.form_data[field.field_key] = field.field_value
          }
          if(this.is_sub){
            let attribute_keys = Object.keys(this.attribute)
            if(attribute_keys.indexOf(field.field_key) != -1){
              field.field_attribute = this.attribute[field.field_key]
            }
          }
          // 用户数据回填特殊处理
          if(field.field_type_id === 60){
            this.read_only_properties[field.field_key] = [field.field_value]
            if(this.is_sub){
              this.form_data[field.field_key] = field.field_value
            }else{
              this.form_data[field.field_key] = field.field_value.username
            }
          }
          if(field.field_type_id === 70){
            this.read_only_properties[field.field_key] = field.field_value
            if(this.is_sub){
              this.form_data[field.field_key] = field.field_value
            }else{
              this.form_data[field.field_key] = field.field_value.username
            }
          }
          // 多选下拉
          if(field.field_type_id === 50){
            this.result = this.form_data[field.field_key]
            this.confirmMultiple(field.field_key,this.selectData(JSON.parse(field.field_choice)))
          }
          // 单选下拉
          if(field.field_type_id === 35 || field.field_type_id === 45){
            this.read_only_properties[field.field_key] = JSON.parse(field.field_choice)[field.field_value]
          }
          // 图片
          if(field.field_type_id === 80){
            this.urlList = field.field_value
          }
        }
      })
      this.$forceUpdate()
    },
    // 子表单增加数据
    subAddData(key){
      // 找到对应的子表单列表循环
      this.form_data[key] = this.form_data[key].map((list,index)=>{
        // 找到对应的清单并获取对应清单的数据
        let _list = JSON.parse(JSON.stringify(list))
        let ref_item = `${key}${index}`
        let data = this.$refs[ref_item][0].getSubData()
        _list = _list.map(item=>{
          // 找到对应的字段对象添加获取的对应数据
          if(typeof data[key] == 'object'){
             item.field_value = JSON.stringify(data[item.field_key])
          }else{
            item.field_value = data[item.field_key]
          }
          item.field_value = data[item.field_key]
          return item
        })
        return _list
      })
      this.$forceUpdate()
    },
    // 获取子表单数组
    getSubData(){
      return this.form_data
    },
    // 父组件获取表单
    getFormData(is_submit = true){
      let str = ''
      let sub_keys = []
      let list = this.field_list.map(item => {
        if(item.field_type_id === 55&&item.label.type === 'sub_table'){
          this.subAddData(item.field_key)
          sub_keys.push(item.field_key)
        }
        if(item.field_attribute == 2 && item.label.type != 'sub_table'){
          return item.field_key
        }
      })
      list.forEach(key=>{
        if(Array.isArray(this.form_data[key])){
          if(this.form_data[key].length == 0){
            this.field_list.forEach(item=>{
              if(item.field_key == key){
                str += item.field_name + ' ; '
              }
            })
          }
        }
        if(!this.form_data[key]){
          this.field_list.forEach(item=>{
            if(item.field_key == key){
              str += item.field_name + ' ; '
            }
          })
        }
      })
      sub_keys.forEach(key=>{
        this.form_data[key].forEach(sub_form_item=>{
          sub_form_item.forEach(sub_field=>{
            if(sub_field.field_attribute == 2){
              if(Array.isArray(sub_field.field_value)){
                if(sub_field.field_value.length == 0){
                  str += sub_field.field_name + ' ; '
                }
              }
              if(!sub_field.field_value){
                str += sub_field.field_name + ' ; '
              }
            }
          })
        })
      })
      if(is_submit && str){
        this.$toast(str+'是必填字段')
        return false
      }else{
        return this.form_data
      }
    },
    // 自定义键盘输入
    onInput(event,key){
      this.form_data[key] = this.form_data[key].toString() + event
      this.$forceUpdate()
    },
    // 自定义键盘删除
    onDelete(key){
      if(this.form_data[key].length > 0){
        this.form_data[key] =  this.form_data[key].substr(0, this.form_data[key].length - 1)
        this.$forceUpdate()
      }
    },
    // 显示popup,动态绑定视图不更新处理
    showPopup(obj_name,key,value){
      // 动态添加的属性 $set也不能让视图更改,需要先删除
      this.$delete(this[obj_name],key)
      this.$set(this[obj_name],key,value)
    },
    // 选择器数据包装
    selectData(obj){
      try {
        obj = JSON.parse(obj)
      } catch(e){
        // console.log(e)
      }
      let arr = Object.keys(obj).map(item=>{
        return {id:item - 0,name:obj[item]}
      })
      return arr
    },
    // 确认选择日期时间
    confirmDatetime(obj_name,key,type,value){
      let str = ''
      if(type == 'date'){
        str = moment(value).format('YYYY-MM-DD');
      }else{
        str = moment(value).format('YYYY-MM-DD HH:mm:ss');
      }
      this.$set(this[obj_name],key,str)
      this.$delete(this.is_show_popup,key)
      this.$set(this.is_show_popup,key,false)
    },

    // 确认选择下拉框
    confirmSelect(value,key) {
      this.$set(this['read_only_properties'],key,value.name)
      this.$set(this['form_data'],key,value.id)
      this.$delete(this.is_show_popup,key)
      this.$set(this.is_show_popup,key,false)
    },
    // 多选下拉框确认
    confirmMultiple(key,multiple_list){
      if(this.result.length!= 0){
        this.popup_list = []
        let id_list = this.result
        multiple_list.forEach((item) => {
          this.result.forEach(id => {
            if(id == item.id){
              this.popup_list.push(item)
            }
          })
        })
        let str = `${
            this.popup_list[0].name
          }${
            this.popup_list[1]?', '+ this.popup_list[1].name:''
          }${
            this.popup_list[2]?', ...':''
        }`
        // id
        this.$delete(this.form_data,key)
        this.$set(this.form_data,key,id_list)
        // 页面显示
        this.$set(this.read_only_properties,key,str)
        // 弹框
        this.showPopup('is_show_popup',key,false)
        // 清空内存数组
        this.popup_list = []
        this.result = []
      }
    },
    // 多选添加内存数组
    multipleAdd(value){
      if(this.result.length == 0){
        this.result.push(value.id)
      }else{
        let k
        this.result.forEach((item,index)=>{
          if(item == value.id){
            k = true
            this.result.splice(index,1)
          }
        })
        if(!k){
          this.result.push(value.id)
        }
      }
    },
    // 提交时约定title需要的数据
    getTitlefields(){
      this.field_list.forEach(item => {
        if(item.field_type_id === 55&&item.label.type === 'sub_table'){
          this.subAddData(item.field_key)
        }
      })
      let fields = {}
      let map_data = {
        "5":(index)=>{return this.form_data[this.field_list[index].field_key]},
        "25":(index)=>{return this.form_data[this.field_list[index].field_key]},
        "30":(index)=>{return this.form_data[this.field_list[index].field_key]},
        "55":(index)=>{return ''},// 包含子表单,不展示
        "80":(index)=>{return ''},// 附件 不展示
        "10":(index)=>{return this.form_data[this.field_list[index].field_key]},
        "15":(index)=>{return this.form_data[this.field_list[index].field_key]},
        "35":(index)=>{
          return this.read_only_properties[this.field_list[index].field_key]
        },
        "45":(index)=>{
          return this.read_only_properties[this.field_list[index].field_key]
        },
        "60":(index)=>{
          if(this.read_only_properties[this.field_list[index].field_key][0]){
            return  this.read_only_properties[this.field_list[index].field_key][0].alias
          }
        },
        "40":(index)=>{
          return this.read_only_properties[this.field_list[index].field_key]
        },
        "50":(index)=>{
          return this.read_only_properties[this.field_list[index].field_key]
        },
        "70":(index)=>{
          let arr = []
          if(this.read_only_properties[this.field_list[index].field_key][0]){
           this.read_only_properties[this.field_list[index].field_key].forEach(item => {
            arr.push(item.alias)
           })
          }
          return arr.join(',')
        },
        "20":(index)=>{
          let str = this.form_data[this.field_list[index].field_key]?'是':'否'
          return
        }
      }
      for (let index = 0; index < 3; index++) {
        let str = (map_data[this.field_list[index].field_type_id])(index)
        if(str.length > 100){
          str = str.substr(0,100)
        }
        fields[this.field_list[index].field_name] = str
      }
      return fields
    }
  }
}
</script>

<style lang="less" scoped>
.mg_bottom_20{
  margin-bottom: 20px;
}
.mg_bottom_1{
  margin-bottom: 1px;
}
.field_template{
  padding: 2px 10px;
  color: rgb(199, 195, 195);
}
.popup_title{
  height: 44px;
  width: 100%;
  .left{
    float: left;
    height: 44px;
    padding: 0 10px;
    color: #1989fa;
    font-size: 14px;
    line-height: 44px;
  }
  .right{
    float: right;
    height: 44px;
    padding: 0 10px;
    color: #1989fa;
    font-size: 14px;
    line-height: 44px;
  }
}
.popup_list{
  position: absolute;
  top: 45px;
  bottom: 0;
  width: 100%;
  .popup_item{
    position: relative;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    margin: 0 10px;
    .checkbox{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }
  }
}
.title_sub{
  padding: 0 15px;
  font-size: 14px;
  color: #666;
  height: 25px;
  line-height: 25px;
  .del_sub{
    color: #58f;
    float: right;
    line-height: 25px;
    background:none;
    border: none;
    height: 25px;
  }
}
.add_sub{
  width: 100%;
  font-size: 14px;
  color: #58f;
  background:none;
  border: none;
  height: 40px;
  line-height: 50px;
}
.disable {
  pointer-events: none;
  .van-field__value{
    color: #969799 !important;
  }
}
.img_box{
  padding: 0 10px;
  .img{
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin: 0 8px 8px 0;
  }
}
</style>
